document.addEventListener('DOMContentLoaded', function() {
    const uploadArticleLink = document.getElementById('upload-article');
    const viewArticlesLink = document.getElementById('view-articles');
    const addTypeLink = document.getElementById('add-type');
    const viewProfileLink = document.getElementById('view-profile');
    const contentDiv = document.getElementById('content');

    uploadArticleLink.addEventListener('click', function(event) {
        event.preventDefault();
        contentDiv.innerHTML = `
            <h2>上传文章</h2>
            <form id="upload-form">
                <input type="text" id="title" placeholder="标题" required />
                <textarea id="content" placeholder="内容" required></textarea>
                <input type="text" id="type" placeholder="分类" required />
                <button type="submit">上传</button>
            </form>
            <div id="upload-response"></div>
        `;
        const uploadForm = document.getElementById('upload-form');
        uploadForm.addEventListener('submit', function(event) {
            event.preventDefault();
            const title = document.getElementById('title').value;
            const content = document.getElementById('content').value;
            const type = document.getElementById('type').value;
            uploadArticle(title, content, type);
        });
    });

    viewArticlesLink.addEventListener('click', function(event) {
        event.preventDefault();
        contentDiv.innerHTML = '<h2>查看所有文章</h2><div id="articles"></div>';
        viewArticles(1, 10);
    });

    addTypeLink.addEventListener('click', function(event) {
        event.preventDefault();
        contentDiv.innerHTML = `
            <h2>增加文章分类</h2>
            <form id="add-type-form">
                <input type="text" id="type-name" placeholder="分类名称" required />
                <button type="submit">添加</button>
            </form>
            <div id="add-type-response"></div>
        `;
        const addTypeForm = document.getElementById('add-type-form');
        addTypeForm.addEventListener('submit', function(event) {
            event.preventDefault();
            const typeName = document.getElementById('type-name').value;
            addType(typeName);
        });
    });

    viewProfileLink.addEventListener('click', function(event) {
        event.preventDefault();
        contentDiv.innerHTML = '<h2>查看个人信息</h2><div id="profile"></div>';
        viewProfile();
    });
});

function uploadArticle(title, content, type) {
    fetch('/blog/user/upload', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ title, content, type })
    })
        .then(response => response.json())
        .then(data => {
            const uploadResponse = document.getElementById('upload-response');
            if (data.code === 1) {
                uploadResponse.innerHTML = `<p>上传成功：${data.data}</p>`;
            } else {
                uploadResponse.innerHTML = `<p>上传失败：${data.msg}</p>`;
            }
        })
        .catch(error => {
            const uploadResponse = document.getElementById('upload-response');
            uploadResponse.innerHTML = `<p>请求失败：${error.message}</p>`;
        });
}

function viewArticles(page, pageSize) {
    fetch(`/blog/text/listText?page=${page}&pageSize=${pageSize}`)
        .then(response => response.json())
        .then(data => {
            const articlesDiv = document.getElementById('articles');
            if (data.code === 1) {
                const articles = data.data.records.map(record => `
                <div>
                    <h3>${record.title}</h3>
                    <p>${record.content}</p>
                    <small>作者：${record.username} 时间：${new Date(record.createTime).toLocaleString()}</small>
                </div>
            `).join('');
                articlesDiv.innerHTML = articles;
            } else {
                articlesDiv.innerHTML = `<p>加载失败：${data.msg}</p>`;
            }
        })
        .catch(error => {
            const articlesDiv = document.getElementById('articles');
            articlesDiv.innerHTML = `<p>请求失败：${error.message}</p>`;
        });
}

function addType(typeName) {
    fetch('/blog/user/addType', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ typeName })
    })
        .then(response => response.json())
        .then(data => {
            const addTypeResponse = document.getElementById('add-type-response');
            if (data.code === 1) {
                addTypeResponse.innerHTML = `<p>添加成功：${data.data}</p>`;
            } else {
                addTypeResponse.innerHTML = `<p>添加失败：${data.msg}</p>`;
            }
        })
        .catch(error => {
            const addTypeResponse = document.getElementById('add-type-response');
            addTypeResponse.innerHTML = `<p>请求失败：${error.message}</p>`;
        });
}

function viewProfile() {
    fetch('/blog/user/checkMyself')
        .then(response => response.json())
        .then(data => {
            const profileDiv = document.getElementById('profile');
            if (data.code === 1) {
                profileDiv.innerHTML = `
                <p>ID: ${data.data.id}</p>
                <p>用户名: ${data.data.username}</p>
                <p>邮箱: ${data.data.email}</p>
                <p>性别: ${data.data.sex}</p>
            `;
            } else {
                profileDiv.innerHTML = `<p>加载失败：${data.msg}</p>`;
            }
        })
        .catch(error => {
            const profileDiv = document.getElementById('profile');
            profileDiv.innerHTML = `<p>请求失败：${error.message}</p>`;
        });
}
